<!--
 * @Author: xuna
 * @Descripttion: 关怀模块
-->
<template>
  <div class="care-container">
    <el-tabs v-model="activeName" class="tab-panel" @tab-click="handleClick">
      <el-tab-pane label="短信通知模板" name="0"></el-tab-pane>
      <el-tab-pane label="贺卡祝福模板" name="1"></el-tab-pane>
      <el-tab-pane label="生日霸屏模板" name="2"></el-tab-pane>
    </el-tabs>
    <el-main class="care-panel">
      <message-notice :is-care="activeName"></message-notice>
      <greet-card :is-care="activeName"></greet-card>
      <dominat-screen :is-care="activeName"></dominat-screen>
    </el-main>
  </div>
</template>

<script>
  import MessageNotice from './components/MessageNotice';
  import GreetCard from './components/GreetCard';
  import DominatScreen from './components/DominatScreen';
  export default {
    components: { MessageNotice, GreetCard, DominatScreen },
    data() {
      return {
        activeName: '0',
      };
    },
    activated() {},
    methods: {
      handleClick(tab) {
        console.log(tab.index);
        this.activeName = tab.index;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .care-container {
    width: 100%;
    min-height: 100%;
    /deep/.el-main {
      padding: 0 !important;
    }
    .tab-panel {
      padding: 0 16px 0 !important;
      box-sizing: border-box;
    }
    .tab-panel,
    /deep/.el-tabs__header,
    /deep/.el-tabs__nav-wrap,
    /deep/.el-tabs__nav-scroll,
    /deep/.el-tabs__nav {
      background-color: #fff;
      margin-bottom: 16px;
      width: 100%;
      height: 48px;
      font-size: 14px;
      color: #353739;
      border-radius: 8px;
      font-weight: 500;
    }
    .care-panel {
      height: calc(100vh - 64px);
      overflow-y: auto;
    }
  }
</style>
